<template>
    <div class="todo-container">
        <div v-if="!qeoUrl">loading...</div>
        <div v-else>the mast queo is<a :href="qeoUrl">{{qeoName}}</a></div>
    </div>
</template>

<script>
    import Vue from 'vue'
    import vueSource from 'vue-resource'
    import axios from 'axios'
    // 使用插件
    Vue.use(vueSource)
    export default {
        name: "App",
        data () {
            return {
                qeoName:'',
                qeoUrl:''
            }
        },
        mounted () {
            /*this.$http.get('https://api.github.com/search/repositories?q=r&sort=stars').then(
                (response) => {
                    console.log(response.data.items[0])
                    this.qeoUrl=response.data.items[0].html_url;
                    this.qeoName=response.data.items[0].name
                },
                (response) => {
                    alert('失败1')
                }
            )*/
            axios.get('https://api.github.com/search/repositories?q=J&sort=stars')
                .then(response => {
                    this.qeoUrl=response.data.items[0].html_url;
                    this.qeoName=response.data.items[0].name;  // 得到返回结果数据
                })
                .catch(error => {
                    console.log(error.message)
                    alert('失败axios')
                })
        }
    }
</script>

<style lang="stylus" scoped>
    /*app*/
    .todo-container {
        width: 600px;
        margin: 40px auto;
        font-size:20px;
    }
    .todo-container .todo-wrap {
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }
</style>